<template>
	<view>
		<view >
			<view class="movieimg">
				 <!-- <image :src="baseurl+info.cover" mode=""/> -->
				 <image :src="info.cover" mode=""/>
			</view>
			<view class="one"><text class="dym">{{info.name}} </text>  </view>
			<view class="two">{{info.playDate}}上映</view>
			<view class="three">{{info.language}} | {{info.duration}}分钟</view>
			<view class="four">观众评分:<text class="grade">{{info.score}}分</text></view>
			<view class="three">看过人数:{{info.favoriteNum}}人 | 想看人数:{{info.likeNum}}人</view>
			  
			<view class="synopsis"  v-html="info.introduction" ></view>
		
			<view class="gotobuy">
				<button type="primary" block color="red" @click="gotobuy(info.id)">前往购票</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {filmdetail} from "../../../api/movieService.js"
	import{baseurl} from '../../../api/request.js';
	
	import {moviedetails} from "../../../mock/movie.js"
	export default {
		data() {
			return {
				baseurl,
				info: {},
			
			}
		},
		async onLoad(option) {
			
			let {id} = option;
			
			let res = await filmdetail(id)
			console.log(res);
			
			if (res.code == 200) {
				// this.bannerList = res.data.rows;
				let data = res.data.data;
				this.info = data;
			} else {
			
				let data = moviedetails().rows[0];
				console.log(data);
				this.info = data;
			}
			
		},
		
		methods: {
			gotobuy(id){
				uni.navigateTo({
					url:"/pages/movie/buymovie/buymovie?id="+id
				})
			}
		}
	}
</script>

<style>


.movieimg{
	width:100%;
	height:450rpx;
	display: flex;
	margin: 20px auto;
	justify-content: center;
}
.movieimg img{
	width: 100%;
	height: 100%;
}

.one{
  margin-top: 10px;
  margin-left: 10px;
}
.two{
  margin-top: 3px;
  color: #797D82;
  margin-left: 10px;
}
.three{
  margin-top: 3px;
  color: #797D82;
  margin-left: 10px;
}
.four{
  margin-top: 3px;
  color: #797D82;
  margin-left: 10px;
}

.dym{
  font-size: 18px;
  font-weight: 700;
}


.synopsis{
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  margin-top: 10px;
  color: #6d5656;
  font-size: 16px;
  overflow: hidden;
  text-indent: 30px;
}

.gotobuy{
	margin-top: 30px;
}



</style>
